import { Component, OnInit, Input, ViewEncapsulation,ViewChild } from '@angular/core';
import { OnChanges,SimpleChanges  } from '@angular/core';
declare let d3: any;

@Component({
  selector: 'app-charts-rank',
  templateUrl: './chart-rank.html',
  styleUrls: ['../../../../node_modules/nvd3/build/nv.d3.css'],
  encapsulation: ViewEncapsulation.None
})
export class ChartRankComponent implements OnInit , OnChanges {
  
  options;
  data;

  @ViewChild('nvd3') nvd3;

  private _prices: any[] =[];
  private _ranks: any[] =[];
  private _notes: any[] =[];

  @Input() set prices( param: any[]) {};
  @Input() set ranks ( param:any[]) {};
  @Input() set notes ( param:any[]) {};
  

  constructor() {
  }

  
     

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
    //this.type = changes.type.currentValue;      
      this._prices.length = 0;
      changes.prices.currentValue.forEach(element => {
        this._prices.push({x: element.x, y: element.y});
      });

      this._ranks.length = 0;
      changes.ranks.currentValue.forEach(element => {
  
        this._ranks.push({x: element.x, y: element.y});
      });

    this.genOption();
   // this.nvd3.chart.xAxis.tickValues(ideas.values.map( function(d){return d.x;} ) );
    //this.nvd3.chart.update();
  }

  ngOnInit() {
  }

  genOption() {

      console.log( "getOption ", this._ranks);
      console.log( "getOption ", this._prices);

      this.data = [ {
        'values': this._ranks,
        'key': 'Ranks',
        'yAxis':1,
        'type':'scatter'
      },
      {
        'values': this._prices,
        'key': 'Price',
        'yAxis':2,
        'type':'scatter'
      }
    ];
  
      this.options = {
        chart: {
          type: 'lineChart',
          height: 450,
          margin : {
            top: 20,
            right: 60,
            bottom: 40,
            left: 60
          },
  
          x: function(d){ return  d.x; },
          y: function(d){ return  d.y; },
          useInteractiveGuideline: true,
          
          interactiveLayer: { 
            tooltip: { 
              contentGenerator: function(data) { 
                //console.log('tooltip', data); 
              } 
            } 
          },

          xAxis: {
            axisLabel: 'Date',
            staggerLabels: true,
            tickFormat: function(d){
              return d3.time.format('%m/%d/%Y')(new Date(d));
            },
          },
          yAxis1: {
            axisLabel: 'Rank',
          },
          yAxis2: {
            axisLabel: 'Price',
          }
        }
      };
    }
}
